<template>

  <div class="wrapper">
    <div class="title">
      欢迎注册
    </div>
    <van-form @submit="handleLogin">
      <van-cell-group inset>
        <van-field
            v-model="loginForm.loginName"
            name="账号"
            label-width="auto"
            label="账号"
            placeholder="账号"
            :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
            v-model="loginForm.password"
            type="password"
            name="密码"
            label-width="auto"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button block type="warning" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>
  </div>

</template>


<script setup lang="ts">
  import { ref,reactive } from 'vue';

  const loginForm = reactive({
    "loginName":null,
    "password":null
  });

  const handleLogin = ()=>{

  }
</script>

<style scoped>

  .wrapper{

  }
  .wrapper .title{
    padding: 40px 0px;
    text-align: center;
    font-size: 20px;
  }
</style>

 